<script setup lang="ts">
defineProps({
  list: {
    type: Object,
    default: () => ({}) as Record<string, string>
  },
})
</script>

<template>
  <div class="banner-inner" :style="{ backgroundImage: `url('${list.display_image}')` }">
    <h4 class="banner-title">{{list.title1}}<span></span></h4>
    <p class="banner-big-title">{{list.title2}}</p>
    <div class="text-view">
      <a href="javascript:void(0)">{{list.title3}}</a>
    </div>
    <div class="text-list flex justify-between">
      <div class="text-item">
        <h4 class="text-item-title">{{list.content1}}<span></span></h4>
        <p class="text-item-small">{{list.content1_1}}</p>
      </div>
      <div class="text-item">
        <h4 class="text-item-title">{{list.content2}}<span></span></h4>
        <p class="text-item-small">{{list.content2_1}}</p>
      </div>
      <div class="text-item">
        <h4 class="text-item-title">{{list.content3}}<span></span></h4>
        <p class="text-item-small">{{list.content3_1}}</p>
      </div>
      <div class="text-item">
        <h4 class="text-item-title">{{list.content4}}<span></span></h4>
        <p class="text-item-small">{{list.content4_1}}</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.banner-inner {
  position: relative;
  padding-top: 98px;
  min-width: 1440px;
  height: 580px;
  // padding-bottom: 30.2%;
  background-position: center 0;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  text-align: center;

  .banner-title {
    font-size: 20px;
    text-align: center;

    span {
      font-size: 12px;
      margin-left: 8px;
      vertical-align: top;
    }
  }

  .banner-big-title {
    margin-top: 6px;
    text-align: center;
    font-size: 82px;
    font-weight: 500;
  }

  .text-view {
    display: inline-block;
    background: rgba(255, 255, 255, .36);
    border-radius: 3px;
    height: 40px;

    a {
      padding: 0 12px;
      line-height: 40px;
      color: #fff;
    }
  }

  .text-list {
    width: 1330px;
    margin: 34px auto 0;

    .text-item {
      padding-top: 20px;

      .text-item-title {
        font-size: 1.8rem;
        font-weight:600;

        span {
          font-size: 12px;
          margin-left: 14px;
          vertical-align: top;
        }
      }

      .text-item-small {
        font-size: 14px;
        margin-top: 7px;
        font-weight: 400;
      }
    }
  }
}
</style>
